<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :placeholder="true" :leftIconSize="0" bgColor="#F9C022">
            <view slot="center" class="xilu_center_outer">
                <view class="xilu_center_slot flex-box">
                    <input class="fs24 flex-grow-1" placeholder="请输入搜索的内容" placeholder-class="cola" />
                    <view class="xilu_search_btn btn1">搜索</view>
                </view>
            </view>
        </u-navbar>
        <Footer :footState="3" :num="messageCount"></Footer>
        <view class="container flex-box flex-col flex-align-start">
            <view class="xilu_bg_block"></view>
            <view class="flex-box flex-between pt30 pb50 plr30 w100">
                <view class="xilu_tips" :class="message.system.total>0?'noread':''" @click="bindNotice()">
                    <view>通知消息</view>
                    <view class="fs24 pt10">{{message.system.message?message.system.message.title:''}}</view>
                </view>
                <view class="xilu_tips" :class="message.interaction.total>0?'noread':''" @click="bindInteraction()">
                    <view>互动消息</view>
                    <view class="fs24 pt10">{{message.interaction.message?message.interaction.message.content:''}}</view>
                </view>
            </view>
            <view class="fs38 plr30 pb40 w100">我的消息</view>
            <view class="flex-grow-1 w100">
                <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :fixed="false" bottom='100rpx' :safearea='true'>
                   <view class="xilu_msg_list plr30 " v-for="(item,index) in loadingList.data" :key="index">
                        <view class="flex-box pb30" @click="bindChat(item)">
                            <image :src="userinfo.id!=item.receive_user_id?item.receiveuser.avatar:item.senduser.avatar" mode="aspectFill" class="xilu_avatar"></image>
                            <view class="flex-grow-1">
                                <view class="flex-box flex-between pb20">
                                    <view class="fs34 col10">{{userinfo.id!=item.receive_user_id?item.receiveuser.nickname:item.senduser.nickname }}</view>
                                    <view class="fs24 col89">{{item.newmsg.createtime_text}}</view>
                                </view>
                                <view class="flex-box">
                                    <view class="flex-grow-1 m-ellipsis fs126 col89 pr25" v-if="item.newmsg.chat_type==3">商品咨询</view>
                                    <view class="flex-grow-1 m-ellipsis fs126 col89 pr25" v-else-if="item.newmsg.chat_type==2">【图片】</view>
                                    <view class="flex-grow-1 m-ellipsis fs126 col89 pr25" v-else>{{ item.newmsg.content }}</view>
                                    <view class="notice" v-if="item.unread_num > 0">{{ item.unread_num }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </mescroll-uni>
            </view>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import Footer from "@/components/footer/footer.vue";
    const chatIM = require('../../xilu/chat.js');
    export default {
        components: {
            Footer,
        },
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                loadingList: {
                    total: 0,
                    current_page: 0,
                    last_page: 1,
                    data: []
                },
                upOption: {
                    page: {
                        size: 20 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                message: {
                    system: {
                        total: 0,
                        message: {
                            name: ''
                        }
                    },
                    interaction: {
                        total: 0,
                        message: {
                            name: ''
                        }

                    }
                },
                userinfo: {

                },
                messageCount: 0,
            };
        },
        onLoad() {
            let page = this;
            let userinfo = this.$core.getUserinfo();
            if (userinfo) {
                //未读消息
                uni.$on("unread_count", function(data) {
                    page.messageCount = getApp().globalData.chat_config.messageCount
                })
                //通知消息
                this.userinfo = userinfo;
                this.fetchMessage();
                chatIM.setMessageBadge(false);
            }
            //刷新列表
            uni.$on('refresh_session', function() {
                page.mescroll.resetUpScroll();
            })
            //获取成功回调
            uni.$on('session_list_callback', function(data) {
                // 接口返回的当前页数据列表 (数组)
                let curPageData = data.data;
                // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                let curPageLen = curPageData.length;
                // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                let totalPage = data.last_page;
                let loadingList = page.loadingList;
                let list_data = loadingList.data.concat(data.data);
                loadingList = data; //追加新数据
                loadingList.data = list_data;
                page.loadingList = loadingList;

                // 请求成功,隐藏加载状态
                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                page.mescroll.endByPage(curPageLen, totalPage);
                setTimeout(() => {
                    page.mescroll.endSuccess(curPageLen)
                }, 20)
            })
        },
        onUnload() {
            uni.$off("unread_count");
            uni.$off("refresh_session");
            uni.$off("session_list_callback");
        },
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
        methods: {
            //消息
            fetchMessage() {
                this.$core.get({
                    url: 'xilumarket.message/summary',
                    data: {},
                    loading: false,
                    success: (ret) => {
                        this.message = ret.data;
                    }
                });
            },

            /*下拉刷新的回调 */
            upCallback(page) {
                //设置列表数据
                if (page.num == 1) {
                    this.loadingList = {
                        total: 0,
                        current_page: 0,
                        last_page: 1,
                        data: []
                    }
                }
                chatIM.wsSend({
                    type: 'sessionlist',
                    page: page.num,
                    pagesize: page.size
                });
            },
            bindChat(item) {
                let product = {
                    id: item.product.id,
                    name: item.product.name,
                    product_type: item.product.product_type,
                    want_num: item.product.want_num,
                    thumb_image_text: item.product.thumb_image_text,
                    salesprice: item.product.salesprice,
                    freight_status: item.product.freight_status,
                    freight_money: item.product.freight_money,
                    to_username: this.userinfo.id != item.receive_user_id ? item.receiveuser.nickname : item.senduser.nickname
                }
                let page = this;
                let receive_user_id = this.userinfo.id != item.receive_user_id ? item.receiveuser.id : item.senduser.id;
				product.refresh_status = item.unread_num>0?1:0;
                uni.navigateTo({
                    url: '/pages/chat/chat?receive_user_id=' + receive_user_id + '&product_id=' + item.product_id,
                    events: {
                        refreshSession: function(data) {
							chatIM.setMessageBadge(false);
							uni.$emit("refresh_session",{});
                            
                        }
                    },
                    success(res) {
                        res.eventChannel.emit('chatProductTransfor', product)
                    }
                })
            },
            //系统消息
            bindNotice() {
                uni.navigateTo({
                    url: '/pages/notification/notification'
                })
            },
            //互动消息
            bindInteraction() {
                uni.navigateTo({
                    url: '/pages/interactive/interactive'
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        min-height: auto;
        height: calc(100vh - 44px - var(--status-bar-height));
    }
    .w100{
        width: 100vw;
    }
    .xilu {
        &_center_outer {
            width: 750rpx;
        }

        &_center_slot {
            width: 502rpx;
            height: 75rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #555555;
            margin-left: 30rpx;
            padding: 0 12rpx 0 20rpx;
        }

        &_search_btn {
            width: 100rpx;
            height: 56rpx;
            font-size: 24rpx;
            line-height: 56rpx;
        }

        &_tips {
            width: 330rpx;
            height: 150rpx;
            background: url(../../static/icon/message_bg1.png) no-repeat center;
            background-size: 100%;
            padding: 35rpx 30rpx;
            color: var(--white);
            font-size: 34rpx;
            position: relative;

            &:nth-of-type(2) {
                background-image: url(../../static/icon/message_bg2.png);
            }

            &.noread::after {
                content: "";
                display: block;
                width: 12rpx;
                height: 12rpx;
                background: #FE3747;
                border-radius: 50%;
                position: absolute;
                right: 163rpx;
                top: 31rpx;
            }
        }

        &_avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 30rpx;
        }

        .notice {
            min-width: 30rpx;
            height: 30rpx;
            padding: 0 5rpx;
            line-height: 30rpx;
            background-color: var(--red);
            color: #fff;
            text-align: center;
            font-size: 24rpx;
            border-radius: 100rpx;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(300rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 0;
        }
        
        &_msg_list:last-of-type{
            margin-bottom: 50rpx;
        }
    }
</style>